<template>
    <div class="content_panel project_modules deal-list">
        <div class="content_panel_top">
            <h3 class="panel_title">
                <span>{{$t('pageTitle.couponStatistics')}}</span>
            </h3>
            <el-form ref="form" :model="form" :rules="rules" :inline="false" class="module_form">
                <el-row :gutter="10">
                    <el-col :span="8">
                        <el-form-item prop="dateRange" label=""><!---->
                            <el-date-picker
                                style="width:100%"
                                v-model="form.dateRange"
                                type="datetimerange"
                                format="yyyy-MM-dd HH:mm:ss"
                                value-format="timestamp"
                                :editable="false"
                                range-separator="-"
                                :default-time="['00:00:00', '23:59:59']"
                                :start-placeholder="$t('common.startTime')"
                                :end-placeholder="$t('common.endTime')"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="discountCouponType"><!--券名称-->
                            <el-select v-model="form.discountCouponType" clearable :placeholder="$t('operation.couponName')" style="width: 100%">
                                <el-option v-for="(type, $index) in keyMap.couponType()" :key="$index" :label="type.label" :value="type.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col><!--券名称-->
                    <!--App名称-->
                    <el-col :span="4">
                        <el-form-item prop="appName">
                            <el-select v-model="form.appName" :placeholder="$t('system.appName')" clearable style="width:100%;">
                                <el-option v-for="item in appList" :key="item.id" :value="item.name" :label="item.name"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-button @click="search" type="primary" icon="el-icon-search">{{ $t('common.search') }}</el-button>
                        <el-button @click="exportExcel" type="primary" icon="el-icon-download">{{ $t('common.export') }}</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div>

        <div class="module_content">
            <div class="content_panel project_modules">
                <div class="table_list">
                    <el-table ref="table" :data="tableData" style="width: 100%;" :max-height="tableMaxHeight">
                        <el-table-column prop="dateDay" :label="$t('common.date')" min-width="150"><!--日期--></el-table-column>
                        <el-table-column prop="appName" :label="$t('system.appName')" min-width="150"><!--app名称--></el-table-column>
                        <el-table-column prop="type" :label="$t('operation.couponName')" min-width="120"><!--券名称-->
                            <template slot-scope="{row}">{{ keyMap.couponType(row.type) }}</template>
                        </el-table-column><!--券名称-->
                        <el-table-column prop="totalNum" :label="$t('common.releaseCount')" min-width="120"></el-table-column><!--发放数量-->
                        <el-table-column prop="usedNum" :label="$t('common.usedCount')" min-width="120">
                            <template slot-scope="{row}">
                                <el-popover v-if="row.usedNum > 0" trigger="hover" @show="showCouponDetail(row)" placement="right">
                                    <el-table :data="row.usedData" v-loading="row.isLoadingUsedData" :max-height="240" style="width: 350px" class="usedTable">
                                        <el-table-column :label="$t('common.numbering')" prop="serialNumber" min-width="150"></el-table-column><!--编号-->
                                        <el-table-column :label="$t('common.quantity')" prop="num"></el-table-column><!--数量-->
                                        <el-table-column :label="$t('common.remark')" prop="remark" :show-overflow-tooltip="true" min-width="120"></el-table-column><!--备注-->
                                    </el-table>
                                    <el-tag slot="reference" size="medium">{{ row.usedNum }}</el-tag>
                                </el-popover>
                                <span v-else>{{ row.usedNum }}</span>
                            </template>
                        </el-table-column><!--已使用数量-->
                        <el-table-column prop="appSucNum" :label="$t('common.applySuccessCount')" min-width="120"></el-table-column><!--申请成功数-->
                        <el-table-column prop="surplusNum" :label="$t('common.remainingInventory')" min-width="120"></el-table-column><!--剩余库存-->
                        <el-table-column prop="predictAmount" :label="$t('common.estimatedCost')" min-width="120"></el-table-column><!--预计成本-->
                        <el-table-column prop="actualAmount" :label="$t('common.actualCost')" min-width="120"></el-table-column><!--实际成本-->
                    </el-table>
                </div>
                <!--分页组件-->
                <pagination @pageChange="pageChange" :page="page"></pagination>
            </div>
        </div>
    </div>
</template>

<script src="./main.js"></script>

<style lang="scss" scoped>
.usedTable {
    th, td {
        padding:5px 0;
    }
}
</style>
